<template>
  <view class="order-item little-line">
    <view class="row user-info">
      <view class="name">
        <view class="profile">
          {{ data.user | sub }}
        </view>
        {{ data.user | name }}
      </view>
      <!-- <view class="nomarl">1091 | 99%</view> -->
    </view>
    <view class="row">
      <view class="nomarl"
        >{{ $t("otc.index.count") }} {{ parseFloat(data.surplus) }}
        {{ data.coin.coin.toUpperCase() }}</view
      >
      <view class="nomarl">{{ $t("otc.index.unit_price") }}</view>
    </view>
    <view class="row">
      <view class="nomarl">
        {{
          $t("otc.index.limit_count", {
            min: parseFloat(data.min),
            max: parseFloat(data.max)
          })
        }}
      </view>
      <view class="price">￥{{ parseFloat(data.price) }}</view>
    </view>
    <view class="row opt">
      <view class="pay">
        <image
          v-for="(t, index) in data.user.enable_banks"
          :key="index"
          :src="t.bank | formatIconUrl"
          class="ml-10"
        ></image>
      </view>
      <view
        ><button class="btn" @click="buy">
          {{ typeText }}
        </button></view
      >
    </view>

    <graceBottomDialog :show="dialogShow" @closeDialog="dialogShow = false">
      <view class="box" slot="content">
        <view class="coin">
          <view>
            <view class="name"
              >{{ typeText }}{{ data.coin.coin.toUpperCase() }}</view
            >
            <view>
              {{ $t("otc.index.unit_price") }}:
              <text class="price">￥{{ parseFloat(data.price) }} </text>
            </view>
          </view>
          <view
            ><image
              class="icon"
              :src="'/static/coin-images/' + data.coin.coin + '.png'"
          /></view>
        </view>
        <view class="type">
          <view @click="changeType(0)" :class="form.type == 0 ? 'active' : ''">
            {{ $t("otc.index.by_amount", { type: typeText }) }}
          </view>
          <view @click="changeType(1)" :class="form.type == 1 ? 'active' : ''">
            {{ $t("otc.index.by_quantity", { type: typeText }) }}
          </view>
        </view>
        <view class="input">
          <view
            ><input
              v-model="form.volume"
              type="number"
              :placeholder="placeholder[form.type]"
          /></view>
          <view>
            <text class="i cny">{{ unit[form.type] }}</text> |
            <text @click="allBuy" class="i all">
              {{
                $t("otc.index.all", {
                  type:
                    data.type == 1
                      ? $t("otc.index.buyin")
                      : $t("otc.index.sellout")
                })
              }}
            </text>
          </view>
        </view>
        <view class="limit">
          {{
            $t("otc.index.limit_count", {
              min: parseFloat(data.min),
              max: parseFloat(data.max)
            })
          }}
        </view>
        <view class="num">
          {{ $t("otc.index.number") }}：{{ showVolume }}
          {{ data.coin.coin.toUpperCase() }}
        </view>
        <view class="amount">
          <view class="t-p">{{
            data.type == 1
              ? $t("otc.index.real_payment")
              : $t("otc.index.actual_payment")
          }}</view>
          <view class="p">￥{{ showAmount }}</view>
        </view>
        <view class="btns">
          <view @click="cancel" class="btn cancel">
            {{ $t("common.operate.cancel") }}
          </view>
          <view @click="submit" class="btn submit">
            {{ $t("otc.index.submit_order") }}
          </view>
        </view>
      </view>
    </graceBottomDialog>
    <cloudPayPassword
      :show="isPayShow"
      @close="togglePayPassword(false)"
      @keyboardDone="payPasswordDone"
    />
  </view>
</template>

<script>
import cloudPayPassword from "../../../components/cloudPayPassword";
import { mapState, mapActions } from "vuex";
import { ceil } from "lodash-es";
export default {
  props: {
    data: {
      type: Object,
      default: null
    }
  },
  components: {
    cloudPayPassword
  },
  data() {
    return {
      dialogShow: false,
      form: {
        type: 0,
        side: undefined,
        volume: "",
        advertId: undefined
      },
      showVolume: 0,
      showAmount: 0,
      unit: {
        0: "CNY",
        1: this.data.coin.coin.toUpperCase()
      },
      isPayShow: false
    };
  },
  computed: {
    typeText() {
      return this.data.type == 1
        ? this.$t("otc.index.buy")
        : this.$t("otc.index.sell");
    },
    placeholder() {
      if (this.data.type == 1) {
        return {
          0: this.$t("otc.index.input_purchase_amount"),
          1: this.$t("otc.index.input_purchase_quantity")
        };
      } else {
        return {
          0: this.$t("otc.index.input_sell_amount"),
          1: this.$t("otc.index.input_sell_quantity")
        };
      }
    }
  },
  filters: {
    sub(v) {
      let name = v.user_info
        ? v.user_info.nick_name
          ? v.user_info.nick_name
          : v.username
        : v.username;
      if (name) {
        return name.substring(0, 1);
      }
      return "";
    },
    name(v) {
      let name = v.user_info
        ? v.user_info.nick_name
          ? v.user_info.nick_name
          : v.username
        : v.username;
      return name;
    },
    formatIconUrl(v) {
      return `../../static/${v}.png`;
    }
  },
  watch: {
    "form.volume"(v) {
      if (!v) {
        return;
      }
      if (this.form.type == 0) {
        this.showVolume = ceil(
          parseFloat(this.form.volume / this.data.price),
          this.data.coin.balance_decimals || 4
        );
        this.showAmount = ceil(this.form.volume, 2);
      } else {
        this.showVolume = ceil(
          this.form.volume,
          this.data.coin.balance_decimals || 4
        );
        this.showAmount = ceil(
          this.numberMul(this.form.volume, this.data.price),
          2
        );
      }
    }
  },
  methods: {
    ...mapActions("otc", ["trade"]),
    numberMul(arg1, arg2) {
      var m = 0;
      var s1 = arg1.toString();
      var s2 = arg2.toString();
      try {
        m += s1.split(".")[1].length;
      } catch (e) {}
      try {
        m += s2.split(".")[1].length;
      } catch (e) {}

      return (
        (Number(s1.replace(".", "")) * Number(s2.replace(".", ""))) /
        Math.pow(10, m)
      );
    },
    buy() {
      this.dialogShow = true;
    },
    cancel() {
      this.dialogShow = false;
    },
    changeType(type) {
      this.form.type = type;
      this.form.volume = "";
      this.showAmount = 0;
      this.showVolume = 0;
    },
    allBuy() {
      if (this.form.type == 0) {
        this.form.volume = this.data.surplus * this.data.price;
      } else {
        this.form.volume = this.data.surplus;
      }
    },
    submit() {
      console.log(this.form.volume);
      if (this.form.volume == "") {
        // console.log("请输入金额");
        uni.showToast({
          title: this.$t('otc.index.tips_input_amount'),
          icon: "none",
          duration: 1500
        });
        return;
      } else if (
        parseFloat(this.showVolume) > parseFloat(this.data.max) ||
        parseFloat(this.showVolume) < parseFloat(this.data.min)
      ) {
        // console.log("请输入范围内的数量");
        uni.showToast({
          title: this.$t('otc.index.tips_quantity_in_range'),
          icon: "none",
          duration: 1500
        });
        return;
      }
      console.log("购买");
      this.dialogShow = false;
      this.isPayShow = true;
    },
    togglePayPassword(show) {
      this.isPayShow = show;
    },
    async payPasswordDone(param) {
      this.isPayShow = false;
      let data = await this.trade({
        num: this.showVolume,
        pay_password: param.password,
        otc_exchange_id: this.data.id
      });
      this.isPayShow = false;
      this.makeToast({ title: this.$t('otc.index.tips_order_success') });
      setTimeout(() => {
        this.handleNavTo({ url: "/pages/otc/order/detail?id=" + data.id });
      }, 1000);
    }
  }
};
</script>

<style scoped>
.little-line:after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #dcdfe6;
  transform: scaleY(0.5);
}
.order-item {
  background: #fff;
  padding: 20rpx 30rpx;
  position: relative;
}
.order-item .user-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 80rpx;
  line-height: 80rpx;
}
.order-item .user-info .name {
  font-size: 30rpx;
  font-weight: bold;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.order-item .user-info .profile {
  width: 50rpx;
  height: 50rpx;
  line-height: 50rpx;
  border-radius: 50%;
  text-align: center;
  background: #0952c3;
  color: #fff;
  font-weight: 100;
  font-weight: bold;
  font-size: 28rpx;
  margin-right: 10rpx;
}
.order-item .opt {
  margin: 20rpx 0;
}
.order-item .row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 2rpx 0;
  align-items: flex-end;
}
.order-item .row .price {
  color: #0952c3;
  font-size: 40rpx;
}
.order-item .row .nomarl {
  font-size: 25rpx;
  color: #8b9faa;
}
.order-item .row .pay image {
  width: 25px;
  height: 25px;
}
.order-item .row .btn {
  border: 0;
  background: #0952c3;
  color: #fff;
  font-size: 25rpx;
  height: 60rpx;
  line-height: 60rpx;
  padding: 0 50rpx;
}
.box {
  background: #fff;
  display: flex;
  flex-direction: column;
  padding: 30rpx 30rpx;
  font-size: 25rpx;
  color: #8b9faa;
}
.box .coin {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 10rpx;
}
.box .coin .name {
  font-size: 34rpx;
  color: #606266;
  padding-bottom: 10rpx;
}
.box .coin .price {
  color: #0952c3;
}
.box .coin .icon {
  width: 40px;
  height: 40px;
}
.box .type {
  display: flex;
  flex-direction: row;
  padding: 10rpx 0;
}
.box .type view {
  margin-right: 30rpx;
  position: relative;
  padding: 10rpx 0;
}
.box .type .active {
  color: #0952c3;
}
.box .type .active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  height: 0;
  border-bottom: 2px solid #0952c3;
}
.box .input {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 14rpx 10rpx;
  margin: 20rpx 0;
  border: 1rpx solid #8b9faa;
}
.box .input input {
  color: #8b9faa;
  font-size: 28rpx;
}
.box .input .cny {
  margin-right: 20rpx;
  color: #606266;
}
.box .input .all {
  margin-left: 20rpx;
  color: #0952c3;
}
.box .amount {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10rpx 0;
}
.box .amount .p {
  font-size: 34rpx;
  color: #0952c3;
}
.box .btns {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  padding: 10rpx 0;
}
.box .btns .btn {
  display: block;
  width: 48%;
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  color: #fff;
  border-radius: 0;
  font-size: 28rpx;
}
.box .btns .cancel {
  background: #96a7ba;
}
.box .btns .submit {
  background: #0952c3;
}
</style>
